<template>
  <div class="my-income-layout">
    <snackbar style-color="#4A4A4A" back-color=" -webkit-linear-gradient(top,#58B042 10%,#FFFFFF 140%)"
      status-color="#ffffff" :fixed="false">
    </snackbar>
    <div class="whole">
      <div class="whole_next">
        <div class="title_text">
          <span>请选择你的角色</span>
        </div>
        <div :class="{roless:current==index}" @click="selectRole(index)" v-for="(item,index) in roleName" :key="index" class="roles">
          <span>{{item.name}}</span>
        </div>
        <div class="bottom">
          <span>下一步</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'income',
    data() {
      return {
        current:'g',
        roleName: [{
            name: "运输司机"
          },
          {
            name: "购机司机"
          },
          {
            name: "维修店主"
          },
          {
            name: "加油员"
          },
          {
            name: "经理"
          },
          {
            name: "管理员"
          },
        ]
      }
    },
    methods: {
      selectRole(item) {
        if(this.current==item){
          this.current="item"
        }else{
          this.current=item
        }
      },
    }
  }
</script>

<style lang="scss" scoped>
  .my-income-layout {
    width: 100%;
    height: 100vh;
    background: -webkit-linear-gradient(top, #58B042 10%, #FFFFFF 140%);
    overflow-y: auto;

    .top-layout {
      display: flex;
      flex-direction: row;
      align-items: center;
      border-bottom: 1px solid rgba(219, 219, 219, 0.5);
      width: 100vw;
      background-color: white;

      .tebs-layout {
        width: 100vw;
      }
    }

    .whole {
      width: 90vw;
      // height: 86vh;
      margin: 2vh auto 2vh auto;
      border-radius: 20px;
      background-color: #FFFFFF;
      font-size: 1.5em;

      .whole_next {
        width: 90%;
        margin: 1vh auto;
        padding-bottom: 0.2vh;
        // overflow-y: auto;

        .title_text {
          margin: 0 auto;
          padding: 10% 0;
          text-align: center;
        }

        .roles {
          margin-bottom: 4%;
          padding: 3% 0;
          text-align: center;
          background-color: #F5F6F7;
        }
        .roless{
          margin-bottom: 4%;
          padding: 3% 0;
          text-align: center;
          background-color: #5BB246;
        }

        .bottom {
          margin-top: 15%;
          margin-bottom: 15%;
          text-align: center;
          padding: 3% 0;
          background-color: #B2D9A8;
        }
      }
    }

  }

  .my-income-layout::-webkit-scrollbar {
    display: none;
  }
</style>
